<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <!-- 
      Vue2 的 Attributes
        传递给组件的属性,如果没有被 props 声明过,那么它就是一个 Attribute

      与 Vue3 的 Attributes 的区别:

        1. Vue2 自定义事件不算 Attribute

        2. Vue2 中class 与 style也不算到 Attribute 中, 也无法被 inheritAttrs 禁用
   -->

    <div id="app"></div>

    <script type="module">
      import Vue from "./lib/vue2.esm.browser.js";

      const app = new Vue({
        template: `
          <Hello class="box" style="color: red"a="a" b="b" c="c" @change="handleChange" />
        `,

        methods: {
          handleChange() {},
          handleUpdate() {},
        },
      });

      Vue.component("Hello", {
        // inheritAttrs: false, // 禁用继承

        props: ["a"],

        template: `
          <div class="self" b="selfB">
            <h2>Hello</h2>  
          </div>
        `,
      });

      app.$mount("#app");
    </script>
  </body>
</html>
